Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 578 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Dark Neon Toggle Switch</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  </head>

  <body>
    <label class="switch">
      <input class="switch__input" type="checkbox" role="switch" />
      <span class="switch__base-outer"></span>
      <span class="switch__base-inner"></span>

      <svg
        class="switch__base-neon"
        viewBox="0 0 40 24"
        width="40px"
        height="24px"
      >
        <defs>
          <filter id="switch-glow">
            <feGaussianBlur
              result="coloredBlur"
              stddeviation="1"
            ></feGaussianBlur>
            <feMerge>
              <feMergeNode in="coloredBlur"></feMergeNode>
              <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
          </filter>

          <linearGradient id="switch-gradient1" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="hsl(var(--on-hue1),90%,70%)" />
            <stop offset="100%" stop-color="hsl(var(--on-hue2),90%,70%)" />
          </linearGradient>

          <linearGradient id="switch-gradient2" x1="0.7" y1="0" x2="0.3" y2="1">
            <stop offset="25%" stop-color="hsla(var(--on-hue1),90%,70%,0)" />
            <stop offset="50%" stop-color="hsla(var(--on-hue1),90%,70%,0.3)" />
            <stop offset="100%" stop-color="hsla(var(--on-hue2),90%,70%,0.3)" />
          </linearGradient>
        </defs>

        <path
          fill="none"
          filter="url(#switch-glow)"
          stroke="url(#switch-gradient1)"
          stroke-width="1"
          stroke-dasharray="0 104.26 0"
          stroke-dashoffset="0.01"
          stroke-linecap="round"
          d="m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z"
        />
      </svg>

      <span class="switch__knob-shadow"></span>
      <span class="switch__knob-container">
        <span class="switch__knob">
          <svg
            class="switch__knob-neon"
            viewBox="0 0 48 48"
            width="48px"
            height="48px"
          >
            <circle
              fill="none"
              stroke="url(#switch-gradient2)"
              stroke-dasharray="0 90.32 0 54.19"
              stroke-linecap="round"
              stroke-width="1"
              r="23"
              cx="24"
              cy="24"
              transform="rotate(-112.5,24,24)"
            />
          </svg>
        </span>
      </span>
      <span class="switch__led"></span>
      <span class="switch__text">Power</span>
    </label>
  </body>
</html>

Share this file: